<template>
	<view class="news-search">
		<view class="search">
			<input type="text" @confirm="handelGetVal" placeholder-style="text-indent: 20rpx;"  />
		</view>
		<!-- 内容部分 -->
		<view class="search_content">
		  <view 
		    class="search_item" 
		    v-for="item in goods" 
		    :key="item.goods_id"
		    @click="handelGoToGoodsDetail(item.goods_id)"
		    >
		      {{item.goods_name}}
		  </view>
		</view>
	</view>
</template>

<script>
	import { handelGetqsearch } from '../../util/user.js'
	export default{
		data(){
			return{
				goods:[],
				TimerID:-1,
			}
		},
		methods:{
			handelGetVal(e){
				const searchContent = e.detail.value
				const query = { query:searchContent }
				if(!searchContent.trim()){
					this.goods = []
					return;
				}
				clearInterval(this.TimerID);
				this.TimerID = setTimeout(()=>{
					this.qsearch(query);
				})
			},
			qsearch(query){
				handelGetqsearch(query).then(res=>{
					this.goods = res.data.message
				})
			},
			handelGoToGoodsDetail(goods_id){
				console.log(goods_id)
				uni.navigateTo({
					url:'/pages/goods-detail/goods-detail?goods_id=' + goods_id
				})
			}
		},
		onLoad(options){
			
		}
	}
</script>

<style lang="scss" scoped>
	.news-search{
		.search{
			position: fixed;
			width: 100%;
			background-color: #B50E03;
			padding: 20rpx 0;
			z-index: 9999;
			input{
				width: 95%;
				height: 60rpx;
				border-radius: 15rpx;
				border: 1rpx solid #fff;
				outline: 0;
				background-color: #FFFFFF;
				margin: 0 auto;
			}
		}
		/* 内容 */
		.search_content{
		  padding-top:100rpx ;
		  .search_item{
		    background-color: #fff;
		    font-size: 26rpx;
		    padding: 15rpx 10rpx;
		    border-bottom: 1rpx solid #ccc;
		    border-radius: 5rpx;
		  
		    /*  附加 */
		    overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		  }
		}
		.isOver{
			margin-top: 50rpx;
			text-align: center;
			color: #FFFFFF;
		}
	}
</style>
